<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>博雅古诗词</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" crossorigin="anonymous">

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap-theme.css}" crossorigin="anonymous">

        <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script th:src="@{/bootstrap/js/bootstrap.js}" crossorigin="anonymous"></script>
        <link rel="stylesheet" th:href="@{/css/poem.css}">
    </head>
    <body>
        <!-- 导航 -->
        <nav class="navbar navbar-inverse navbar-fix-top" role="navigation">
            <div class="container" th:replace="fragments/header::header">
            </div>
        </nav>

        <div class="container">
            <div class="blog-header">
                <h1 class="blog-title">博雅古诗词</h1>
                <p class="lead blog-description">带你穿越时空，与诗仙一起吟诗作赋。</p>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <section th:each="poetry : ${poetries}">
                    <div class="panel panel-default" >
                        <div class="panel-heading poem-title">
                            <h3 class="panel-title">
                                <a th:href="@{'/poetry/'+${poetry.id}}" th:text="${poetry.title}" target="_blank">静夜思</a></h3>
                        </div>
                        <div class="panel-body">
                            <h6>
                                <span th:text="${poetry.dynasty}"></span>.
                                <a th:href="@{'/author/'+${poetry.authorid}+'/1'}" th:text="${poetry.author}" target="_blank">李白</a></h6><br>
                            <span th:text="${poetry.content}">
                            窗前明月光，疑是地上霜。<br>
                            举头望明月，低头思故乡。
                            </span>

                            <!--<h5 class="page-header"></h5>-->

                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">译文<span class="badge">0</span></a>-->
                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">注释<span class="badge">1</span></a>-->
                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">赏析<span class="badge">2</span></a>-->
                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">故事<span class="badge">4</span></a>-->
                        </div>
                        <p style="margin: 10px;display: none;">
                            你我夫妻诀别已经整整十年，强忍不去思念可终究难忘怀。孤坟远在千里之外，没有地方能诉说心中的悲伤凄凉。即使你我夫妻相逢怕是也认不出我来了，我四处奔波早已是灰尘满面两鬓如霜。
                            昨夜在梦中又回到了家乡，看见你正在小窗前对镜梳妆。你我二人默默相对无言，只有泪落千行。料想你年年都为我柔肠寸断，在那凄冷的月明之夜，在那荒寂的短松冈上。
                        </p>
                    </div>
                    </section>

                    <!-- 分页 -->
                    <nav>
                        <ul class="pagination pagination-lg">
                            <li th:class="${pageCurrent==1?'disabled':''}"><a th:href="@{'/findByWord/?pageNo='+${pageCurrent-1}+'&keyWord='+${keyWord}}">上一页</a></li>
                            <th:block th:each="p : ${pages}">
                                <li th:class="${p==pageCurrent?'active':''}"><a th:href="@{'/findByWord/?pageNo='+${p}+'&keyWord='+${keyWord}}" th:text="${p}">3</a></li>
                            </th:block>
                            <li th:class="${pageCurrent==pageCount?'disabled':''}"><a th:href="@{'/findByWord/?pageNo='+${pageCurrent+1}+'&keyWord='+${keyWord}}">下一页</a></li>
                        </ul>
                    </nav>

                </div>

                <!-- 左侧栏目 -->
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a href="#">作者</a></h5>
                        </div>
                        <div id="left_author" class="panel-body">
                            <a href="#" class="btn btn-default btn-xs" role="button">李白</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">杜甫</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">苏轼</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">孟浩然</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">曹操</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">杜牧</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">李清照</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">袁枚</a>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a href="#">标签</a></h5>
                        </div>
                        <div id="left_tag" class="panel-body">
                            <a href="#" class="btn btn-default btn-xs" role="button">四季</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">春天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">夏天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">秋天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">冬天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">中秋</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">山水</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">田园</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="fragments/footer::footer"></div>
    </body>
</html>
